<template>
  <div class="container" style="padding: 0;margin: 0;">
    <div class="grid-container">
      <div class="row row-1">
        <div class="w_full flex-col">
          <span class="title">人员管理</span>
          <div class="flex-row comm_border" style="height: 80px;margin-top: 16px;">
            <div class="w_full flex-row-center">
              <span class="search_title" style="margin-left: 24px">岗位</span>
              <el-select clearable class="search_select" size="large"
                         style="margin-left: 8px; width: 150px;"
                         v-model="data.selectPosition"
                         placeholder="请选择岗位">
                <el-option
                    v-for="(qtType, index) in data.listPosition"
                    :key="index"
                    :label="qtType.dictName"
                    :value="qtType.dictId"
                ></el-option>
              </el-select>
              <span class="search_title" style="margin-left: 24px">职能</span>
              <el-select clearable class="search_select" size="large" style="margin-left: 8px; width: 150px;"
                         v-model="data.selectTitle"
                         placeholder="请选择职能">
                <el-option
                    v-for="(qtType, index) in data.listTitle"
                    :key="index"
                    :label="qtType.dictName"
                    :value="qtType.dictId"
                ></el-option>
              </el-select>
              <span class="search_title" style="margin-left: 24px">用户名</span>
              <el-input class="search_input" placeholder="请输入用户名" size="large"
                        style="width: 150px;margin-left: 8px" v-model="data.userName"></el-input>

              <span class="search_title" style="margin-left: 24px">用户ID</span>
              <el-input class="search_input" placeholder="请输入用户ID" size="large"
                        style="width: 150px;margin-left: 8px" v-model="data.userId"></el-input>
            </div>
            <div class="flex-row-center">
              <el-button class="search_btn_primary"
                         type="primary"
                         @click="click_search"
                         style="margin-right: 24px;width: 88px;height: 44px;">查询
              </el-button>
            </div>
          </div>
          <div class="flex-row-center" style="margin-top: 16px; height:80px;justify-content: space-between">
            <el-button style="width:114px;height: 48px;border-radius: 12px" type="primary" :icon="Plus"
                       @click="click_create">新增
            </el-button>
            <el-input placeholder="请输入" v-model="data.searchName"
                      style="width:412px;height: 48px;border-radius: 12px"
                      :prefix-icon="Search"></el-input>
          </div>
        </div>
      </div>
      <div class="row row-2 full">
        <div class="scrollable-content comm_border full" style="padding: 16px;">
          <div class="flex_1" style="margin: 0">
            <el-table :data="data.listUser" border>
              <el-table-column prop="index" label="序号" width="60"/>
              <el-table-column prop="userId" label="工号" min-width="5%"/>
              <el-table-column prop="userName" label="姓名" min-width="5%"/>
              <el-table-column prop="workLevelStr" label="能级" min-width="5%"/>
              <el-table-column prop="titleStr" label="职能" min-width="5%"/>
              <el-table-column prop="positionStr" label="岗位" min-width="5%"/>
              <el-table-column prop="workingDateStr" label="参加工作时间" min-width="5%"/>
              <el-table-column label="操作" width="120px">
                <template #default="scope">
                  <div class="flex-row-center">
                    <el-button link size="small" @click="click_preview(scope.row)">查看</el-button>
                    <el-button link size="small" style="color: red" @click="click_delete(scope.row)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="row row-3 w_full">
        <div class="flex-row-center w_full"
             style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
          <el-pagination
              v-model:current-page="pager.currentPage"
              v-model:page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import {ElNotification} from "element-plus";
import {addDialog} from "@/components/gDialog/index";
import msg from "@/components/msg";
import {DictInfoVO} from "@/type/vo/DictInfoVO";
import {api_addUser, api_deleteUser, api_editUser, api_getListUser} from "@/request/apis/userApi";
import {UserQueryDto} from "@/type/dto/UserQueryDto";
import {UserInfoVO} from "@/type/vo/UserInfoVO";
import UserCreate from "@/views/User/Dialogs/UserCreate.vue";
import {api_getListDict} from "@/request/apis/assistantApi";
import {DICT_TYPE_LEVEL, DICT_TYPE_POSITION, DICT_TYPE_TITLE} from "@/constants/Constants_DictType";
import router from "@/router";
import UserInfoHelper from "@/type/utils/UserInfoHelper";
import md5 from "md5";


const data = reactive({
  userName: '',
  userId: '',
  selectTitle: '',
  selectPosition: '',
  listUser: Array<UserInfoVO>(),
  listTitle: Array<DictInfoVO>(),
  listLevel: Array<DictInfoVO>(),
  listPosition: Array<DictInfoVO>(),
})
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})


onMounted(async () => {

  // let userInfo: UserInfoVO = new UserInfoVO();
  //
  // userInfo.userName = '123'
  //
  // const r = await api_addUser(userInfo);

  await queryDict(DICT_TYPE_TITLE);
  await queryDict(DICT_TYPE_LEVEL);
  await queryDict(DICT_TYPE_POSITION);
  await search_pri();
})

const queryDict = async (dictType: string) => {
  let r = await api_getListDict(dictType);
  if (!r) {
    await msg.error("数据异常");
    return;
  }
  console.log('dict',r);
  console.log('dict',r.code);
  console.log('dict',r.msg);
  if (r.code != 0) {
    await msg.error(`数据异常${r.code} msg：${r.msg}`);
    return;
  }
  switch (dictType) {
    case DICT_TYPE_TITLE:
      data.listTitle = r.data;
      break;
    case DICT_TYPE_LEVEL:
      data.listLevel = r.data;
      break;
    case DICT_TYPE_POSITION:
      data.listPosition = r.data;
      break;
  }
}

const click_preview = (userInfo: UserInfoVO) => {
  router.push({
    path: '/userPreview',
    query: {
      userId: userInfo.userId
    }
  });
}

const click_create = () => {
  try {
    addDialog({
      title: "创建用户",
      component: shallowRef(UserCreate),
      width: "800px",
      props: {},
      callBack: async (dRet: boolean) => {
        await search_pri();
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}

const click_delete = async (userInfo: UserInfoVO) => {
  try {
    const rDialog = await msg.yesNo(
        `是否确认删除用户 ${userInfo.userName}?`,
        '警告'
    );
    if (rDialog) {
      const r = await api_deleteUser(userInfo.userId);
      if (!r) {
        await msg.info('数据异常');
        return;
      }
      if (r.code != 0) {
        await msg.info(`数据异常!  ${r.code}  msg：${r.msg}`);
        return;
      }
      await search_pri();
      ElNotification({
        title: '提示',
        message: '已删除!',
      })
    }
  } catch (error) {
    // 处理取消操作
  }
}

const search_pri = async () => {

  const limit = pager.pageSize;
  const page = pager.currentPage;
  const query: UserQueryDto = {
    limit: limit,
    page: page,
    titleId: data.selectTitle,
    positionId: data.selectPosition,
    userName: data.userName,
    userId: data.userId
  }
  // let dtEnd = data.dtStart ? timeStrAsTick(data.dtEnd) : null;

  const r = await api_getListUser(query);
  if (!r) {
    await msg.info('数据异常');
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data != undefined) {
    console.log('r.data.records', r.data.records);
    if (r.data.records) {
      for (let i = 0; i < r.data.records.length; i++) {
        r.data.records[i].index = i + 1;
        // if (r.data.records[i].workingDate) {
        UserInfoHelper.init(r.data.records[i]);
        UserInfoHelper.initLevel(r.data.records[i], data.listLevel);
        UserInfoHelper.initTitle(r.data.records[i], data.listTitle);
        UserInfoHelper.initPosition(r.data.records[i], data.listPosition);
        // }
      }
    }
    data.listUser = r.data.records;
    pager.total = r.data.total;
  }
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-1,
.row-3 {
}

.row-2 {
  overflow: auto;
}

.scrollable-content {

  line-height: 1.5em;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.naireName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
